
/**
 * 
 * @see 地图类型切换控件类，继承自BaseWidget。
 * 
 */
SwitcherWidget= OpenLayers.Class(BaseWidget,{
	initialize : function() {
	},
	
	//返回组装好的地图切换控件dom对象
	getElement : function(){
		if(!this.element){
			if(this.config){
				this.element = this.createElement(this.map);	
			}
		}
		return this.element;
	},
	
	//开始组装组件
	createElement : function(map){
		var $this=this;
		var Layers=this.config.layer;
		var switcherBox=$("<div id='SwitcherWidget'></div>");
		
		switcherBox.addClass('map-switcher-box');
		switcherBox.addClass('widget-class');
		if( this.config.top!=null)switcherBox.css('top' ,this.config.top+'px');
		if( this.config.right!=null)switcherBox.css('right' ,this.config.right+'px');
		if( this.config.left!=null)switcherBox.css('left' ,this.config.left+'px');
		if( this.config.bottom!=null)switcherBox.css('bottom' ,this.config.bottom+'px');
		switcherBox.css({
			'width' :'100px',
			'background-color' : '#EFEFEF'
		});
		
		var PaneTitle=$("<div class='PaneTitle'><img src='images/widget/blank.gif' style=''>&nbsp;BaseMap</div>");
		var PaneContenter=$("<div class='PaneContenter'></div>");
		//当鼠标离开这边区域时，自动关闭
		$this.map.events.register('click', PaneTitle, function(){
			if(PaneContenter.children().length>0){
				 PaneTitle.trigger('click');
			}
		});	
		PaneTitle.css({
			'background-color' : '#EFEFEF',
			'background-repeat' : 'repeat-x',
			'border-bottom' : '1px solid #B5BCC7',
			'border-top' : '1px solid #B5BCC7',
			'border-left' : '1px solid #B5BCC7',
			'border-right' : '1px solid #B5BCC7',
			'padding-top' : '5px',
			'padding-bottom' :'3px',
			'padding-right' : '7px',
			'padding-left' : '10px',
			'cursor' : 'pointer',
			'height' : '20px',
			'background-image' : "url(images/widget/w_titlebar.png)"
		});
		PaneTitle.find('img').css({
			'background-image' : 'url(images/widget/spriteArrows.png)',
			'background-repeat': 'no-repeat',
			'height' : '8px',
			'width' : '7px',
			'background-position': '-14px 0'
		});
		
		//控制开关
		PaneTitle.mouseover(function(){
			PaneTitle.css({
				'background-color' : '#C2E0FD',
				'border-color' : '#CAE5FF'
			});
			
		}).mouseout(function(){
			PaneTitle.css({
				'background-color' : '#EFEFEF',
				'border-color' : '#B5BCC7'
			});
		}).toggle(function(){
			 switcherBox.css({
			 	'width' :'400px'
			  });
			  PaneTitle.find('img').css({
			  	'background-position': '0px 0'
			  });
			 switcherBox.animate({height:300},"fast"); 
			 PaneContenter.css({
				'display' :'none',
				'padding-top' : '0px',
				'height':'270px',
				'display' :''
			});
			var EastBasemapGallery=$("<div id='EastBasemapGallery'></div>");
			PaneContenter.append(EastBasemapGallery);
			EastBasemapGallery.css({
				'width' : '398px',
				'height' : '265px',
				'padding-top' : '3px',
				'border-left' : '1px solid #B5BCC7',
				'border-right' : '1px solid #B5BCC7',
				'border-bottom' : '1px solid #B5BCC7',
				'padding-bottom' : '3px',
				'overflow-y' : 'scroll'
			});
			//添加图层图片样例
			for(var i=0;i<Layers.length;i++){
				var layer=Layers[i];
				var baseMapLayer=$("<div class='EastBasemapGalleryContainer'></div>");
				baseMapLayer.css({
					'float' : 'left',
					'margin' : '5px 10px 0 10px'
				});
				var baseImage=$('<img class="EastBasemapGalleryThumbnail" name="'+layer.name+'" src="'+layer.src+'">');
				baseImage.css({
					'width:' :'100px',
					'height' : '67px',
					'cursor' : 'pointer',
					'border': '2px solid white',
					'margin' : '1px',
					'-moz-box-shadow' : '0px 0px 7px #000',
					'-webkit-box-shadow' : '0px 0px 7px #000',
					'box-shadow' : '0px 0px 7px #000'
				});
				baseMapLayer.append(baseImage);
				var EastBasemapGalleryLabel=$('<div title="'+layer.name+'">'+layer.name+'</div>');
				baseMapLayer.append(EastBasemapGalleryLabel);
				EastBasemapGallery.append(baseMapLayer);
				baseImage.click(function(){
					$(this).css({
						'border': '2px solid #6FF',
						'border-color' : '#6FF !important'
					});
					var ortherImg=$(this).parent().siblings().children("img");
					for(var i=0;i<ortherImg.length;i++){
						var oimage=$(ortherImg[i]);
						oimage.css({
							'border': '2px solid white',
							'border-color' : 'white !important'
						});
					}
					var layerName=$(this).attr('name');
					var layerMap;
					if(map.getLayersByName(layerName)!=null){
						if(map.getLayersByName(layerName).length>0){
							layerMap=map.getLayersByName(layerName)[0];
							map.setBaseLayer(layerMap, false);
						}
					}
					
				})
			}
		},function(){
			 switcherBox.animate({height:30},"fast"); 
			 switcherBox.animate({width:100},"slow"); 
			 PaneTitle.find('img').css({
			  	'background-position': '-14px 0'
			  });
			 PaneContenter.empty();
		});
		
		switcherBox.append(PaneTitle);
		switcherBox.append(PaneContenter);
		return switcherBox;
	},
	CLASS_NAME:"openGis.SwitcherWidget"
});